import '../auth-styles.css'
import styles from './SocialIcons.module.css'

// PRIVATE API
export const Google = () => (
  <svg
    className={styles.icon}
    aria-hidden="true"
    fill="currentColor"
    viewBox="0 0 24 24"
  >
    <g id="brand" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g id="google" fill="#000000" fillRule="nonzero">
        <path
          d="M11.99,13.9 L11.99,10.18 L21.35,10.18 C21.49,10.81 21.6,11.4 21.6,12.23 C21.6,17.94 17.77,22 12,22 C6.48,22 2,17.52 2,12 C2,6.48 6.48,2 12,2 C14.7,2 16.96,2.99 18.69,4.61 L15.85,7.37 C15.13,6.69 13.87,5.89 12,5.89 C8.69,5.89 5.99,8.64 5.99,12.01 C5.99,15.38 8.69,18.13 12,18.13 C15.83,18.13 17.24,15.48 17.5,13.91 L11.99,13.91 L11.99,13.9 Z"
          id="Shape"
        ></path>
      </g>
    </g>
  </svg>
)

export const Keycloak = () => (
  <svg
    className={styles.icon}
    aria-hidden="true"
    fill="currentColor"
    viewBox="0 0 559 466"
  >
    <g id="brand" transform="matrix(1,0,0,1,-233.075,-279.1)" fill="#000000" fillRule="nonzero">
      <path
        d="M786.2,395.5L705.6,395.5C704.1,395.5 702.6,394.7 701.9,393.4L637.2,281.2C636.4,279.9 635,279.1 633.4,279.1L369.4,279.1C367.9,279.1 366.4,279.9 365.7,281.2L298.4,397.6L233.6,509.8C232.9,511.1 232.9,512.7 233.6,514.1L298.4,626.3L365.6,742.8C366.3,744.1 367.8,745 369.3,744.9L633.4,744.9C634.9,744.9 636.4,744.1 637.2,742.8L702,630.6C702.7,629.3 704.2,628.4 705.7,628.5L786.3,628.5C789,628.5 791.1,626.3 791.1,623.7L791.1,400.4C791,397.7 788.8,395.5 786.2,395.5ZM477.5,630.6L457.2,665.6C456.9,666.1 456.4,666.6 455.9,666.9C455.3,667.2 454.7,667.4 454,667.4L413.7,667.4C412.3,667.4 411,666.7 410.4,665.4L350.3,561.1L344.4,550.8L322.8,513.9C322.5,513.4 322.3,512.8 322.4,512.1C322.4,511.5 322.6,510.8 322.9,510.3L344.6,472.7L410.5,358.7C411.2,357.5 412.5,356.7 413.8,356.7L454,356.7C454.7,356.7 455.4,356.9 456.1,357.2C456.6,357.5 457.1,357.9 457.4,358.5L477.7,393.7C478.3,394.9 478.2,396.4 477.5,397.5L412.4,510.3C412.1,510.8 412,511.4 412,511.9C412,512.5 412.2,513 412.4,513.5L477.5,626.2C478.4,627.7 478.3,629.3 477.5,630.6ZM679.6,513.9L658,550.8L652.1,561.1L592,665.4C591.3,666.6 590.1,667.4 588.7,667.4L548.4,667.4C547.7,667.4 547.1,667.2 546.5,666.9C546,666.6 545.5,666.2 545.2,665.6L524.9,630.6C524,629.3 524,627.7 524.8,626.4L589.9,513.7C590.2,513.2 590.3,512.6 590.3,512.1C590.3,511.5 590.1,511 589.9,510.5L524.8,397.7C524.1,396.5 524,395.1 524.6,393.9L544.9,358.7C545.2,358.2 545.7,357.7 546.2,357.4C546.8,357 547.5,356.9 548.3,356.9L588.7,356.9C590.1,356.9 591.4,357.6 592,358.9L657.9,472.9L679.6,510.5C679.9,511.1 680.1,511.7 680.1,512.3C680.1,512.7 679.9,513.3 679.6,513.9Z"
      />
    </g>
  </svg>
)

// PRIVATE API
export const GitHub = () => (
  <svg
    className={styles.icon}
    aria-hidden="true"
    fill="currentColor"
    viewBox="0 0 20 20"
  >
    <path
      fillRule="evenodd"
      d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
      clipRule="evenodd"
    />
  </svg>
)

export const Discord = () => (
  <svg
    className={styles.icon}
    aria-hidden="true"
    fill="currentColor"
    viewBox="0 0 16 16"
  >
    <path d="M13.545 2.907a13.227 13.227 0 00-3.257-1.011.05.05 0 00-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 00-3.658 0 8.258 8.258 0 00-.412-.833.051.051 0 00-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 00-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 003.995 2.02.05.05 0 00.056-.019c.308-.42.582-.863.818-1.329a.05.05 0 00-.01-.059.051.051 0 00-.018-.011 8.875 8.875 0 01-1.248-.595.05.05 0 01-.02-.066.051.051 0 01.015-.019c.084-.063.168-.129.248-.195a.05.05 0 01.051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 01.053.007c.08.066.164.132.248.195a.051.051 0 01-.004.085 8.254 8.254 0 01-1.249.594.05.05 0 00-.03.03.052.052 0 00.003.041c.24.465.515.909.817 1.329a.05.05 0 00.056.019 13.235 13.235 0 004.001-2.02.049.049 0 00.021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 00-.02-.019zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612z" />
  </svg>
)

export const Slack = () => (
  <svg
    className={styles.icon}
    aria-hidden="true"
    fill="currentColor"
    viewBox="0 0 24 24"
  >
    <path d="M13 10C13 11.1046 13.8954 12 15 12C16.1046 12 17 11.1046 17 10V5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5V10ZM5 8C3.89543 8 3 8.89543 3 10C3 11.1046 3.89543 12 5 12H10C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8H5ZM15 13C13.8954 13 13 13.8954 13 15C13 16.1046 13.8954 17 15 17H20C21.1046 17 22 16.1046 22 15C22 13.8954 21.1046 13 20 13H15ZM10 22C8.89543 22 8 21.1046 8 20L8 15C8 13.8954 8.89543 13 10 13C11.1046 13 12 13.8954 12 15V20C12 21.1046 11.1046 22 10 22ZM8 5C8 3.89543 8.89543 3 10 3C11.1046 3 12 3.89543 12 5V7H10C8.89543 7 8 6.10457 8 5ZM3 15C3 16.1046 3.89543 17 5 17C6.10457 17 7 16.1046 7 15V13H5C3.89543 13 3 13.8954 3 15ZM17 20C17 21.1046 16.1046 22 15 22C13.8954 22 13 21.1046 13 20V18H15C16.1046 18 17 18.8954 17 20ZM22 10C22 8.89543 21.1046 8 20 8C18.8954 8 18 8.89543 18 10V12H20C21.1046 12 22 11.1046 22 10Z" />
  </svg>
)
